<template>
  <div id="dashboard">
    <van-tabbar
      v-model="active"
      :safe-area-inset-bottom="true"
      class="active_tab"
      active-color="#75a342"
    >
      <!-- 给购物车的Tabbar加个ID 方便做加入购物车的小球动画 -->
      <van-tabbar-item
        v-for="(item, index) in tabbars"
        :key="index"
        :id="index == 3 ? 'buycar' : ''"
        @click="tab(index, item.name)"
        :info="item.name == 'cart' ? goodsNum : ''"
      >
        <span :class="currIndex == index ? active : ''">{{
          $t(item.title)
        }}</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? item.active : item.normal" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <!-- 缓存界面选择加载 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: {},
  data() {
    return {
      currIndex: 0,
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "home.home",
          normal: require("@/images/tabbar/home_default.png"),
          active: require("@/images/tabbar/home_selected.png"),
        },
        {
          name: "category",
          title: "home.category",
          normal: require("@/images/tabbar/category_default.png"),
          active: require("@/images/tabbar/category_selected.png"),
        },
        {
          name: "eat",
          title: "home.eat",
          normal: require("@/images/tabbar/eat_default.png"),
          active: require("@/images/tabbar/eat_selected.png"),
        },
        {
          name: "cart",
          title: "home.cart",
          normal: require("@/images/tabbar/shoppingcart_default.png"),
          active: require("@/images/tabbar/shoppingcart_selected.png"),
          num: 5,
        },
        {
          name: "mine",
          title: "home.mine",
          normal: require("@/images/tabbar/mine_default.png"),
          active: require("@/images/tabbar/mine_selected.png"),
        },
      ],
    };
  },
  computed: {
    goodsNum() {
      let num = 0;
      return num;
    },
  },
  created() {},
  mounted() {
    this._initData();
  },
  watch: {},
  methods: {
    ...mapMutations(["INIT_SHOP_CART", "INIT_USER_INFO"]),
    tab(index, val) {
      this.currIndex = index;
      this.$router.push(val);
    },
    // 2.初始化购物车数据
    _initData() {
      // this.INIT_SHOP_CART();
      this.INIT_USER_INFO();
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
</style>
